<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>
</head>
<body>
  <style type="text/css">
    div{
      border: 10px solid black;
    }

    div div{
      border: 2px solid black;
    }
  </style>

  <div id="bottom" style="position:absolute;top:2000px;">&#160;</div>

  <div id="a1" style="position:absolute;background:yellow;top:40px;left:40px;overflow:scroll;width:100px;height:100px">
    <div id="a2" style="position:absolute;width:20px;background:red;height:20px;top:300px;left:20px">

    </div>
    <div id="a3" style="position:absolute;width:20px;background:orange;height:20px;top:400px;left:20px">

    </div>
    <div id="a4" style="position:absolute;width:20px;background:blue;height:20px;top:500px;left:20px">

    </div>
    <div id="a5" style="position:absolute;width:20px;background:green;height:20px;top:600px;left:20px">

    </div>
  </div>

  <div id="b1" style="position:absolute;background:yellow;top:40px;left:200px;overflow:scroll;width:200px;height:100px">
    <div id="b2" style="position:absolute;width:20px;background:red;height:200px;left:10px;top:20px">

    </div>
    <div id="b3" style="position:absolute;width:20px;background:orange;height:200px;left:40px;;top:40px">

    </div>
    <div id="b4" style="position:absolute;width:20px;background:blue;height:200px;left:70px;;top:80px">

    </div>
    <div id="b5" style="position:absolute;width:20px;background:green;height:200px;left:100px;;top:120px">

    </div>
  </div>

  <a style="position:absolute;top:280px;left:20px" href="javascript:demobrowser.demo.bom.ScrollIntoView.test()">Dimension test</a>

  <div id="z1" style="background:red;width:100px;height:100px;overflow:visible;position:absolute;left:20px;top:300px">
	</div>
  <div id="z2" style="background:orange;width:100px;height:100px;overflow:scroll;position:absolute;left:20px;top:420px">
	</div>
  <div id="z3" style="background:blue;width:100px;height:100px;overflow:auto;position:absolute;left:20px;top:540px">
	</div>
  <div id="z4" style="background:green;width:100px;height:100px;overflow:auto;position:absolute;left:20px;top:660px">
	</div>
  <div id="z5" style="background:red;width:100px;height:100px;overflow:visible;position:absolute;left:200px;top:300px">
	  <div style="height:300px">&#160;</div>
	</div>
  <div id="z6" style="background:orange;width:100px;height:100px;overflow:scroll;position:absolute;left:200px;top:420px">
	  <div style="height:300px">&#160;</div>
	</div>
  <div id="z7" style="background:blue;width:100px;height:100px;overflow:auto;position:absolute;left:200px;top:540px">
	  <div style="height:300px">&#160;</div>
	</div>
  <div id="z8" style="background:green;width:100px;height:100px;overflow:hidden;position:absolute;left:200px;top:660px">
	  <div style="height:300px">&#160;</div>
	</div>

	<div id="s1" style="position:absolute;left:400px;top:200px;background:yellow;width:100px;height:100px">
  	<div id="s2" style="position:absolute;left:0px;top:0px;background:orange;width:100px;height:100px">

  	</div>
	</div>
</body>
</html>
